<%--
  Created by IntelliJ IDEA.
  User: 有点呆
  Date: 2025/5/2
  Time: 21:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学院-专业-班级</title>
    <style>
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .info-panel {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>学院专业班级查询</h2>

    <div class="form-group">
        <label for="college">学院:</label>
        <select id="college">
            <option value="">--请选择学院--</option>
        </select>
    </div>

    <div class="form-group">
        <label for="major">专业:</label>
        <select id="major" disabled>
            <option value="">--请先选择学院--</option>
        </select>
    </div>

    <div class="form-group">
        <label for="class">班级:</label>
        <select id="class" disabled>
            <option value="">--请先选择专业--</option>
        </select>
    </div>

    <div class="info-panel" id="infoPanel">
        请选择学院、专业和班级查看详细信息
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 加载学院数据
        loadColleges();

        // 学院变化事件
        $("#college").change(function() {
            const collegeId = $(this).val();
            if (collegeId) {
                $("#major").prop("disabled", false);
                loadMajors(collegeId);
                $("#class").prop("disabled", true).html('<option value="">--请先选择专业--</option>');
                updateInfoPanel();
            } else {
                resetMajorsAndClasses();
            }
        });

        // 专业变化事件
        $("#major").change(function() {
            const majorId = $(this).val();
            if (majorId) {
                $("#class").prop("disabled", false);
                loadClasses(majorId);
                updateInfoPanel();
            } else {
                resetClasses();
            }
        });

        // 班级变化事件
        $("#class").change(function() {
            updateInfoPanel();
        });
    });

    function loadColleges() {
        $.ajax({
            url: "/api/colleges",
            type: "GET",
            dataType: "json",
            success: function(data) {
                const $collegeSelect = $("#college");
                $collegeSelect.empty().append('<option value="">--请选择学院--</option>');

                $.each(data, function(index, college) {
                    $collegeSelect.append(
                        $("<option>").val(college.collegeId).text(college.collegeName)
                    );
                });
            },
            error: function() {
                alert("加载学院数据失败");
            }
        });
    }

    function loadMajors(collegeId) {
        $.ajax({
            url: "/api/majors",
            type: "GET",
            data: { collegeId: collegeId },
            dataType: "json",
            success: function(data) {
                const $majorSelect = $("#major");
                $majorSelect.empty().append('<option value="">--请选择专业--</option>');

                $.each(data, function(index, major) {
                    $majorSelect.append(
                        $("<option>").val(major.majorId).text(major.majorName)
                    );
                });
            },
            error: function() {
                alert("加载专业数据失败");
            }
        });
    }

    function loadClasses(majorId) {
        $.ajax({
            url: "/api/classes",
            type: "GET",
            data: { majorId: majorId },
            dataType: "json",
            success: function(data) {
                const $classSelect = $("#class");
                $classSelect.empty().append('<option value="">--请选择班级--</option>');

                $.each(data, function(index, cls) {
                    $classSelect.append(
                        $("<option>").val(cls.classId).text(cls.className)
                    );
                });
            },
            error: function() {
                alert("加载班级数据失败");
            }
        });
    }

    function updateInfoPanel() {
        const collegeText = $("#college option:selected").text();
        const majorText = $("#major option:selected").text();
        const classText = $("#class option:selected").text();

        let info = "";
        if (collegeText && collegeText !== "--请选择学院--") {
            info += "<strong>学院:</strong> " + collegeText + "<br>";
        }
        if (majorText && majorText !== "--请选择专业--") {
            info += "<strong>专业:</strong> " + majorText + "<br>";
        }
        if (classText && classText !== "--请选择班级--") {
            info += "<strong>班级:</strong> " + classText;
        }

        if (!info) {
            info = "请选择学院、专业和班级查看详细信息";
        }

        $("#infoPanel").html(info);
    }

    function resetMajorsAndClasses() {
        $("#major").prop("disabled", true).html('<option value="">--请先选择学院--</option>');
        $("#class").prop("disabled", true).html('<option value="">--请先选择专业--</option>');
        updateInfoPanel();
    }

    function resetClasses() {
        $("#class").prop("disabled", true).html('<option value="">--请先选择专业--</option>');
        updateInfoPanel();
    }
</script>
</body>
</html>
